const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const SW = 500;
const SH = 400;

init();

async function init() {
	ctx.fillStyle = "#1D2125";
	ctx.fillRect(0, 0, SW, SH);
	ctx.lineWidth = 1;
	ctx.moveTo(0, SH * 0.5);
	ctx.lineTo(SW, SH * 0.5);
	ctx.moveTo(SW * 0.5, 0);
	ctx.lineTo(SW * 0.5, SH);

	ctx.strokeStyle = "#f0f0f0";
	ctx.stroke();

	drawPanel(
		ctx,
		{
			title: "Deposit",
			sub: "3522123874.23(USDT)",
			up: false
		},
		SW * 0.5,
		SH * 0.5
	);

	drawPanel(
		ctx,
		{
			title: "Deposit",
			sub: "153874.23(USDT)",
			up: true
		},
		200,
		400
	);
}

// drawPanel(
//     ctx,
//     {
//         title: "Deposit",
//         sub: "153874.23(USDT)",
//         up: true
//     },
//     200,
//     400
// );

//绘制文字对话框
function drawPanel(ctx, obj, sx, sy) {
	ctx.font = "bold 12px Arial";
	let max = 0;
	for (let i in obj) {
		let len = ctx.measureText(obj[i]).width;
		if (len > max) {
			max = len;
		}
	}

	console.log("最大宽度", max);

	let contentHeight = 40;
	let xPadding = 16;
	let yPadding = 8;
	let width = max + 2 * xPadding; //宽度
	let height = contentHeight + 2 * yPadding; //高度
	let radius = 4; //圆角
	let arrowWidth = 18; //箭头宽度
	let arrowHeight = 12; //箭头高度
	let borderColor = "#F6475D";

	let x = sx - width * 0.5;
	let y = sy - height - arrowHeight;

	if (obj.up) {
		y = sy + arrowHeight;
		borderColor = "#0DCB81";
		drawUpFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor);
	} else {
		drawDownFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor);
	}

	ctx.textAlign = "center";
	ctx.fillStyle = borderColor;
	ctx.fillText(obj.title, sx, yPadding + y + 12);

	ctx.textAlign = "left";
	ctx.fillStyle = "#FFFFFF";
	ctx.fillText(obj.sub, xPadding + x, yPadding + y + 32);
}

//箭头向下
function drawDownFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor) {
	ctx.beginPath();
	ctx.strokeStyle = borderColor;

	ctx.moveTo(x + radius, y);
	ctx.lineTo(x + width - radius, y);
	ctx.arcTo(x + width, y, x + width, y + radius, radius);
	ctx.lineTo(x + width, y + height - radius);
	ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);

	ctx.lineTo(x + width / 2 + arrowWidth / 2, y + height);
	ctx.lineTo(x + width / 2 + arrowWidth * 0.25, y + height + arrowHeight * 0.5);
	ctx.quadraticCurveTo(x + width / 2, y + height + arrowHeight, x + width / 2 - arrowWidth * 0.25, y + height + arrowHeight * 0.5);
	ctx.lineTo(x + width / 2 - arrowWidth / 2, y + height);
	ctx.lineTo(x + radius, y + height);
	ctx.arcTo(x, y + height, x, y + height - radius, radius);
	ctx.lineTo(x, y + radius);
	ctx.arcTo(x, y, x + radius, y, radius);

	ctx.lineWidth = 2;
	ctx.fillStyle = "rgba(0,0,0,0.8)";
	ctx.stroke();
	ctx.fill();
}

//箭头向上
function drawUpFrame(ctx, x, y, width, height, radius, arrowWidth, arrowHeight, borderColor) {
	ctx.beginPath();
	ctx.strokeStyle = borderColor;
	ctx.moveTo(x + radius, y);
	ctx.lineTo(x + width / 2 - arrowWidth / 2, y);
	ctx.lineTo(x + width / 2 - arrowWidth * 0.25, y - arrowHeight * 0.5);
	ctx.quadraticCurveTo(x + width / 2, y - arrowHeight, x + width / 2 + arrowWidth * 0.25, y - arrowHeight * 0.5);

	ctx.lineTo(x + width / 2 + arrowWidth / 2, y);
	ctx.lineTo(x + width - arrowWidth, y);
	ctx.arcTo(x + width, y, x + width, y + radius, radius);

	ctx.lineTo(x + width, y + radius);

	ctx.lineTo(x + width, y + height - radius);

	ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);

	ctx.lineTo(x + radius, y + height);
	ctx.arcTo(x, y + height, x, y + height - radius, radius);

	ctx.lineTo(x, y + radius);
	ctx.arcTo(x, y, x + radius, y, radius);
	ctx.lineTo(x + radius, y);

	ctx.lineWidth = 2;
	ctx.fillStyle = "rgba(0,0,0,0.8)";
	ctx.stroke();
	ctx.fill();
}
